<template>
  <div class="treatment-data-container">
    <div class="search-container">
      <el-input
        v-model="searchKeyword"
        placeholder="诊疗项目名称"
        class="search-input"
        clearable
      >
        <template #append>
          <el-button @click="handleSearch">
            <el-icon><Search /></el-icon> 搜索
          </el-button>
        </template>
      </el-input>
    </div>
    
    <div class="action-buttons">
      <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon> 添加项目
      </el-button>
      <el-button type="danger" @click="handleBatchDelete">
        <el-icon><Delete /></el-icon> 删除选中
      </el-button>
    </div>
    
    <el-table
      :data="treatmentList"
      stripe
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        type="index"
        label="序号"
        width="70"
        align="center"
      />
      <el-table-column
        prop="category"
        label="项目类别"
        width="80"
        align="center"
      />
      <el-table-column
        prop="code"
        label="项目编码"
        width="140"
      />
      <el-table-column
        prop="nationalCode"
        label="项目国家编码"
        width="220"
      />
      <el-table-column
        prop="name"
        label="项目名称"
        min-width="200"
      />
      <el-table-column
        prop="description"
        label="项目说明"
        min-width="180"
      />
      <el-table-column
        prop="exclusion"
        label="除外内容"
        min-width="180"
      />
      <el-table-column
        prop="unit"
        label="计价单位"
        width="90"
        align="center"
      />
      <el-table-column
        prop="price"
        label="价格"
        width="90"
        align="right"
      />
      <el-table-column
        prop="remark"
        label="备注"
        width="80"
      />
      <el-table-column
        label="操作"
        width="140"
        align="center"
        fixed="right"
      >
        <template #default="scope">
          <el-button type="primary" link @click="handleEdit(scope.row)">修改</el-button>
          <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-container">
      <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalTreatments"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    
    <!-- 添加/编辑诊疗项目对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '添加诊疗项目' : '编辑诊疗项目'"
      width="50%"
    >
      <el-form
        :model="treatmentForm"
        :rules="treatmentRules"
        ref="treatmentFormRef"
        label-width="120px"
      >
        <el-form-item label="项目类别" prop="category">
          <el-select v-model="treatmentForm.category" placeholder="请选择项目类别">
            <el-option label="G" value="G" />
            <el-option label="D" value="D" />
            <el-option label="F" value="F" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目编码" prop="code">
          <el-input v-model="treatmentForm.code" placeholder="请输入项目编码" />
        </el-form-item>
        <el-form-item label="项目国家编码" prop="nationalCode">
          <el-input v-model="treatmentForm.nationalCode" placeholder="请输入项目国家编码" />
        </el-form-item>
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="treatmentForm.name" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="项目说明" prop="description">
          <el-input v-model="treatmentForm.description" placeholder="请输入项目说明" type="textarea" rows="2" />
        </el-form-item>
        <el-form-item label="除外内容" prop="exclusion">
          <el-input v-model="treatmentForm.exclusion" placeholder="请输入除外内容" type="textarea" rows="2" />
        </el-form-item>
        <el-form-item label="计价单位" prop="unit">
          <el-select v-model="treatmentForm.unit" placeholder="请选择计价单位">
            <el-option label="台/次" value="台/次" />
            <el-option label="次" value="次" />
            <el-option label="日" value="日" />
          </el-select>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model.number="treatmentForm.price" placeholder="请输入价格" type="number" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="treatmentForm.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Plus, Delete } from '@element-plus/icons-vue';

const searchKeyword = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const totalTreatments = ref(1455);
const selectedTreatments = ref([]);
const dialogVisible = ref(false);
const dialogType = ref('add');
const treatmentFormRef = ref(null);

const treatmentForm = reactive({
  id: '',
  category: '',
  code: '',
  nationalCode: '',
  name: '',
  description: '',
  exclusion: '',
  unit: '',
  price: '',
  remark: ''
});

const treatmentRules = {
  category: [{ required: true, message: '请选择项目类别', trigger: 'change' }],
  code: [{ required: true, message: '请输入项目编码', trigger: 'blur' }],
  nationalCode: [{ required: true, message: '请输入项目国家编码', trigger: 'blur' }],
  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  unit: [{ required: true, message: '请选择计价单位', trigger: 'change' }],
  price: [
    { required: true, message: '请输入价格', trigger: 'blur' },
    { type: 'number', message: '价格必须为数字', trigger: 'blur' }
  ]
};

// 模拟诊疗项目数据
const treatmentList = ref([
  {
    id: 1,
    category: 'G',
    code: '300000000/1',
    nationalCode: '45330000001000-300000000/1',
    name: '使用腕部镣加收',
    description: '',
    exclusion: '',
    unit: '台/次',
    price: '180',
    remark: ''
  },
  {
    id: 2,
    category: 'G',
    code: '300000000/2',
    nationalCode: '45330000001000-300000000/2',
    name: '使用关节镜加收',
    description: '',
    exclusion: '',
    unit: '台/次',
    price: '250',
    remark: ''
  },
  {
    id: 3,
    category: 'G',
    code: '300000000/3',
    nationalCode: '45330000001000-300000000/3',
    name: '使用胸腔镜加收',
    description: '',
    exclusion: '',
    unit: '台/次',
    price: '500',
    remark: ''
  },
  {
    id: 4,
    category: 'G',
    code: '300000000/4',
    nationalCode: '45330000001000-300000000/4',
    name: '使用腹腔镜加收',
    description: '',
    exclusion: '',
    unit: '台/次',
    price: '400',
    remark: ''
  },
  {
    id: 5,
    category: 'G',
    code: '300000000/5',
    nationalCode: '45330000001000-300000000/5',
    name: '使用手术显微镜加收',
    description: '',
    exclusion: '',
    unit: '台/次',
    price: '200',
    remark: ''
  },
  {
    id: 6,
    category: 'G',
    code: '300000000/6',
    nationalCode: '45330000001000-300000000/6',
    name: '使用宫腔镜加收',
    description: '',
    exclusion: '',
    unit: '台/次',
    price: '250',
    remark: ''
  },
  {
    id: 7,
    category: 'G',
    code: '300000000/7',
    nationalCode: '45330000001000-300000000/7',
    name: '使用高频电刀',
    description: '',
    exclusion: '',
    unit: '台/次',
    price: '50',
    remark: ''
  },
  {
    id: 8,
    category: 'G',
    code: '300000000/8',
    nationalCode: '45330000001000-300000000/8',
    name: '使用氩气刀',
    description: '',
    exclusion: '',
    unit: '台/次',
    price: '200',
    remark: ''
  },
  {
    id: 9,
    category: 'G',
    code: '300000000/9',
    nationalCode: '45330000001000-300000000/9',
    name: '使用超声刀',
    description: '',
    exclusion: '',
    unit: '台/次',
    price: '1000',
    remark: ''
  },
  {
    id: 10,
    category: 'D',
    code: '310100001',
    nationalCode: '00310100001000-310100001',
    name: '脑电图',
    description: '含常规脑波检查，至少8导',
    exclusion: '',
    unit: '次',
    price: '36',
    remark: '脑电专业发源定位加收10元，术中监测20元/小时，脑电图16导及以上加收10元'
  }
]);

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1;
  // 这里应该发送请求进行搜索
  ElMessage.success('搜索关键词: ' + searchKeyword.value);
};

// 处理添加诊疗项目
const handleAdd = () => {
  dialogType.value = 'add';
  resetForm();
  dialogVisible.value = true;
};

// 处理编辑诊疗项目
const handleEdit = (row) => {
  dialogType.value = 'edit';
  resetForm();
  Object.keys(treatmentForm).forEach(key => {
    treatmentForm[key] = row[key];
  });
  dialogVisible.value = true;
};

// 处理删除诊疗项目
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除"${row.name}"吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里应该发送请求删除诊疗项目
    ElMessage.success(`已删除${row.name}`);
    treatmentList.value = treatmentList.value.filter(item => item.id !== row.id);
  }).catch(() => {});
};

// 处理批量删除
const handleBatchDelete = () => {
  if (selectedTreatments.value.length === 0) {
    ElMessage.warning('请至少选择一项');
    return;
  }
  
  ElMessageBox.confirm(`确定要删除选中的${selectedTreatments.value.length}项吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里应该发送请求批量删除
    const ids = selectedTreatments.value.map(item => item.id);
    treatmentList.value = treatmentList.value.filter(item => !ids.includes(item.id));
    ElMessage.success(`已删除${selectedTreatments.value.length}项`);
    selectedTreatments.value = [];
  }).catch(() => {});
};

// 处理表格选择变化
const handleSelectionChange = (selection) => {
  selectedTreatments.value = selection;
};

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  // 这里应该重新加载数据
};

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  // 这里应该重新加载数据
};

// 重置表单
const resetForm = () => {
  if (treatmentFormRef.value) {
    treatmentFormRef.value.resetFields();
  }
  Object.keys(treatmentForm).forEach(key => {
    treatmentForm[key] = '';
  });
};

// 提交表单
const submitForm = () => {
  treatmentFormRef.value.validate((valid) => {
    if (valid) {
      if (dialogType.value === 'add') {
        // 这里应该发送请求添加诊疗项目
        const newTreatment = { ...treatmentForm, id: Date.now() };
        treatmentList.value.unshift(newTreatment);
        ElMessage.success('添加成功');
      } else {
        // 这里应该发送请求更新诊疗项目
        const index = treatmentList.value.findIndex(item => item.id === treatmentForm.id);
        if (index !== -1) {
          treatmentList.value[index] = { ...treatmentForm };
          ElMessage.success('更新成功');
        }
      }
      dialogVisible.value = false;
    }
  });
};

onMounted(() => {
  // 这里应该发送请求获取初始数据
  console.log('诊疗项目数据维护组件已加载');
});
</script>

<style scoped>
.treatment-data-container {
  padding: 20px;
}

.search-container {
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

.action-buttons {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 